<template>
  <div id="result">
    <div class="top">
      <input
        type="text"
        placeholder="搜索音乐 / 专辑 / 歌手 / 歌单 / 用户"
        v-model="inputValue"
        @keyup.enter="reset"
      />
    </div>
    <div class="result">
      <div class="nav">
        <div class="navItem">
          <router-link
            :to="{ name: 'searchSongs', query: { keywords: keyWord } }"
            >单曲</router-link
          >
        </div>
        <div class="navItem">
          <router-link
            :to="{ name: 'searchSinger', query: { keywords: keyWord } }"
            >歌手</router-link
          >
        </div>
        <div class="navItem">
          <router-link
            :to="{ name: 'searchAlbums', query: { keywords: keyWord } }"
            >专辑</router-link
          >
        </div>
        <div class="navItem">
          <router-link
            :to="{ name: 'searchGedan', query: { keywords: keyWord } }"
            >歌单</router-link
          >
        </div>
        <!-- <div class="navItem">
          <router-link :to="{ name: 'searchMv', query: { keywords: keyWord } }"
            >mv</router-link
          >
        </div> -->
      </div>
      <div class="resultCont">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: null,
      // 搜索关键词
      keyWord: null,
      // 获取的歌手信息
      singer: null,
      // 获取的专辑信息
      albums: null,
      // 获取的歌单信息
      gedan: null,
      // 获取的mv信息
      mvs: null,
      //   导航列表
      navList: ["单曲", "歌手", "专辑", "歌单", "mv"],
    };
  },
  methods: {
    reset() {
      this.keyWord = this.inputValue;
      this.$router.replace({
        name: "searchSongs",
        query: {
          keywords: this.keyWord,
        },
      });
    },
  },
  created() {
    // 通过关键词获取结果
    this.keyWord = this.$route.query.keywords;
  },
};
</script>

<style scoped>
@import url("../css/searchResult");
</style>